<template>
  <div class="box">
    <header class="header">
      <van-search v-model="value" show-action placeholder="韩版新款连衣裙">
        <template #left>
          <van-icon name="bars" size="30" />
        </template>
        <template #action>
          <van-icon name="chat-o" size="30" />
        </template>
      </van-search>
    </header>
    <div class="content">
      <div class="sidebar">
        <van-sidebar class="left" v-model="active">
          <van-sidebar-item title="正在流行" />
          <van-sidebar-item title="上衣" />
          <van-sidebar-item title="裤子" />
          <van-sidebar-item title="裙子" />
          <van-sidebar-item title="内衣" />
          <van-sidebar-item title="女鞋" />
          <van-sidebar-item title="男友" />
          <van-sidebar-item title="包包" />
          <van-sidebar-item title="运动" />
        </van-sidebar>
      </div>
      <div class="right" @change="onChange">
           <ul>
            <li v-for="item in list" :key="item.id">
                <div>
                    <img :src="item.image" alt="">
                </div>
                <div>
                    <p>{{item.title}}</p>
                    <p>{{item.price}}</p>
                </div>
            </li>
           </ul>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const active = ref(1);
import request from '@/utlis/request.js'
const list=ref([])
const onChange=()=>{
    request.get('/kind').then((res) => {
        if(res.data.code==200)
        {
            list.value=res.data.data
        }
    })
}
</script>